<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素伪类选择器示例</title>
    <style type="text/css">
        /** 选中勾选的复选或单选框 */
        input:checked {
            width: 30px;
            height: 30px;
        }
        /** 选中可用的输入框 */
        input:enabled {
            background-color: green;
        }
        /** 选中禁用的输入框 */
        input:disabled {
            background-color: gray;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="password">
    <input type="text" disabled>
</body>
</html>